<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 页面加载时显示的加载动画 */
#loader {
    position: fixed; /* 固定在页面中央 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f3f3f3; /* 背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* 保证在页面其他内容上方 */
}

/* 动画效果 */
#loader::before {
    content: "";
    width: 50px;
    height: 50px;
    border: 5px solid #ccc; /* 灰色边框 */
    border-top-color: #4caf50; /* 顶部为绿色 */
    border-radius: 50%; /* 圆形 */
    animation: spin 1s linear infinite; /* 旋转动画 */
}

/* 旋转动画的关键帧 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 页面内容的样式 */
#content {
    display: none; /* 初始隐藏内容 */
    text-align: center;
    margin-top: 50px;
    font-family: Arial, sans-serif;
}
    </style>
</head>

<body>
     <!-- 加载动画的容器 -->
     <div id="loader"></div>

     <!-- 页面内容 -->
     <div id="content">
         <h1>Welcome to the Animated Page!</h1>
         <p>Content appears after the loading animation completes.</p>
         <!-- 其他内容 -->
     </div>



    <!-- <p>10</p>
    <button class="btn-no">开始</button>
    <button class="btn-in">暂停</button> -->

    <script>

// 监听页面加载完毕事件
window.addEventListener('load', function() {
    // 获取加载动画的元素
    const loader = document.getElementById('loader');
    
    // 隐藏加载动画
    loader.style.display = 'none';

    // 显示页面内容
    const content = document.getElementById('content');
    content.style.display = 'block';

    // 启动动画
    startAnimation();
});

// 定义动画启动逻辑的函数
function startAnimation() {
    // 示例动画逻辑
    console.log('Animation started');
    
    // 可以在这里添加更多动画逻辑
    const content = document.getElementById('content');
    content.style.opacity = '0';
    content.style.transition = 'opacity 2s';
    setTimeout(() => {
        content.style.opacity = '1';
    }, 100);
}

        // let times = null
        // let sti = 10

        // const btnno = document.querySelector('.btn-no')
        // const btnin = document.querySelector('.btn-in')
        // const p = document.querySelector('p')

        // btnno.addEventListener('click', function () {
        //     if (this.textContent == '开始') {
        //         btnno.disabled = true

        //         let sets = setInterval(() => {
        //             sti--
        //             p.innerHTML = ` <p>${sti}</p>`
        //             if (sti <= 0) {
        //                 btnno.disabled = false
        //                 clearInterval(sets)
        //             }
        //         }, 1000)
        //     }else{
                
        //     }
        // })


        
    </script>
</body>

</html>